Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: make categories into accessible nav buttons #282

Merged
merged 3 commits into from
Mar 12, 2019

Conversation

nolanlawson
Copy link

fixes #219

  1. Changes the categories <div> into a <nav> (see navigation role for details).
  2. Changes each category button into a true <button>. This makes it tabbable, and you can press the space button to press them.
  3. Adds aria-label for each button, since the title is not sufficient for a11y
  4. Adds an aria-label to the <nav> to help distinguish it from any other <nav>s that may be on the page. This requires a new i18n label ("Emoji categories" by default).

Here is a GIF of me pressing tab and spacebar to demonstrate: https://gfycat.com/agedwindycockatiel

nolanlawson added a commit to nolanlawson/emoji-mart that referenced this pull request Mar 10, 2019
fix: make categories into accessible nav buttons
nolanlawson added a commit to nolanlawson/emoji-mart that referenced this pull request Mar 10, 2019
fix: make categories into accessible nav buttons
@nolanlawson
Copy link
Author

Fixed a small CSS issue - I noticed that the user agent stylesheet for <button>s can override the fill now, so we can't use currentColor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

A11Y: Category Icons should be tabbable
1 participant